<template>
  <view class="body">
    <uni-forms validate-trigger="bind" err-show-type="undertext">
      <view class="content">
        <view class="title">
          <font class="leftTitle">卡券名称</font>
          <font class="rightTitle">
            {{voucher.voucherName}}
          </font>
        </view>
        <view class="line"></view>
        <view class="title">
          <font class="leftTitle">可用范围</font>
          <font class="rightTitle">
            {{voucher.teaHouseName}}
          </font>
        </view>
        <view class="line"></view>
        <view class="title">
          <font class="leftTitle">有效期至</font>
          <font class="rightTitle">
            购买后{{voucher.validDays}}天内有效
          </font>
        </view>
        <view class="line"></view>
        <view class="title">
          <font class="leftTitle">可用次数</font>
          <font class="rightTitle">
            {{voucher.quantity}}次
          </font>
        </view>
        <view class="line"></view>
<!--        <view class="title">
          <font class="leftTitle">原价</font>
          <font class="rightTitle">
            {{(voucher.originalPrice/100).toFixed(2)}}元
          </font>
        </view>
        <view class="line"></view>-->
        <view class="title">
          <view class="leftTitle">
            使用说明
          </view>
          <view class="rightTitle">
            {{voucher.remark}}
          </view>
        </view>
        <view class="line"></view>
      </view>

      <view class="footer">
        <view class="order-detail">
          {{(voucher.price/100).toFixed(2)}}元
          <span class="voucher-origin-price">
            原价{{(voucher.originalPrice/100).toFixed(2)}}元
          </span>
        </view>
        <view class="submit-button" @click="toPay">
          确认购买
        </view>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import util from '@/libs/util.js'
import globalConfig from '../../../config'
const baseHttp = globalConfig.API_HOST

export default {
  data() {
    return {
      voucher: {}
    }
  },
  onLoad(params) {
    this.voucher = JSON.parse(params.voucher);
    console.log(this.voucher)
  },
  onShow() {

  },
  components: {

  },
  computed: {

  },
  methods: {
    ...util,
    toPay() {
      wx.login({
        success: (res) => {
          if (res.code) {
            this.wxCode = res.code;
			
			let data={
				code: this.wxCode,
				voucherId: this.voucher.id,
			}
			console.log(data,123)
			// return
            this.$api.post('/weixin/voucher/pay',
                {
                  code: this.wxCode,
                  voucherId: this.voucher.id,
                }
            ).then((response) => {
              if (response.ret===1) {
                //console.log(response);
                let json = "{"+response.data+"}";
                json = json.replace(/'/g,'"');
                json = JSON.parse(json);

                uni.requestPayment({
                  provider: 'wxpay',
                  timeStamp: json.timeStamp,
                  nonceStr: json.nonceStr,
                  package: json.package,
                  signType: json.signType,
                  paySign: json.paySign,
                  success:  (res) => {
                    this.$Message.success("支付成功");

                    uni.navigateBack({
                      delta: 1
                    });

                  },
                  fail: function (err) {
                    console.log('fail:' + JSON.stringify(err));
                  }
                });

              } else {
                this.$Message.error(response.msg)
              }
            });
          }
        }
      });

    },
    goPage(url) {
      uni.navigateTo({url: url})
    },
  }
}
</script>



<style lang="scss">
.body {
  padding-bottom: 160rpx;
  background-color: #f4f5f3;
  .content {
    background-color: white;
    margin-bottom: 15px;
    padding-bottom: 10px;
    .TextRight {
      float: right;
      width: 30%;
      font-size: 14px;
      cursor: pointer;
      padding: 5px;
    }
  }
  .line {
    //height: 1px;
    width: 94%;
    margin: 0 auto;
    //background-color: #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  .uni-forms-item {
    margin: 0 auto;
    margin-top: 5px;
    width: 90%;
  }
  .uni-forms--top {
    padding: 0px 0px;
  }
  .title {
    align-items: center;
    padding-left: 15px;
    height: 35px;
    line-height: 30px;
    margin-top: 5px;
    font-weight: normal;
    color: #333;
	font-size: 28rpx;
  }
  .leftTitle {
    float: left;
    color: grey;
  }
  .rightTitle {
    margin-right: 10px;
    float: right;
  }
  .uni-forms-item__label {
    width: 80px !important;
  }
  .uni-input-noneborder {
    padding: 0 10px;
    height: 35px;
    width: 90%;
    float: left;
    font-size: 14px;
    color: #666;
    border-radius: 5px;
    box-sizing: border-box;
  }
  .uni-input-border {
    padding: 0 10px;
    height: 35px;
    width: 100%;
    float: left;
    font-size: 14px;
    color: #666;
    border: 1px #e5e5e5 solid;
    box-sizing: border-box;
  }
  .inputText {
    width: 10%;
    line-height: 35px;
    float: right;
    text-align: center;
  }
  .picker {
    padding: 10;
    height: 35px;
    width: 90%;
    float: left;
    font-size: 14px;
    color: #666;
    border-radius: 5px;
    box-sizing: border-box;
    line-height: 40px;
  }
  .content {
    width: 100%;
  }

  .btuSty {
    margin-top: 20px;
    width: 70%;
    margin: 0 auto;
    height: 60px;
  }
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: 1px solid $uni-theme-color;
  height:100upx;
  line-height: 100upx;
  display: flex;
  font-size:40upx;

  .order-detail {
    color: #FC9E17;
    width:calc(100 - 130px);
    padding-left: 15px;
    font-weight: bold;
  }

  .voucher-origin-price{
    color: grey;
    font-size: 28rpx;
    margin-top: 10rpx;
    text-decoration:line-through;
    margin-left: 10px;
    font-weight: normal;
  }

  .submit-button{
    margin:0 auto;
    background-color:$uni-theme-color;
    color:white;
    width:130px;
    text-align: center;
    position: absolute;
    right: 0;
  }
}


</style>

